<template>
  <div class="asset-overview">
    <div class="card-container">
      <Top100BarChart
          ref="top100HorizontalBarChartRef"
          :data="top100Data"
          :autoRander="autoRander"
          :autoNumber="autoNumber"
          :height="pieHeight"
      />
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import Top100BarChart from "./commonRankingBarChart.vue";

const autoRander = ref(false);
const autoNumber = ref(60);
const pieHeight = ref("2rem");

const top100Data = [
  { name: "audit_log_ali", value: 211 },
  { name: "hudi_budexec_bgt_plan_bill", value: 198 },
  { name: "audit_log_all", value: 176 },
  { name: "dm_budget", value: 162 },
  { name: "pay_vou_bill_relation", value: 131 },
];
</script>

<style scoped>
.asset-overview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
</style>